import { connect } from '@tarojs/redux';
import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import moment from 'moment'
import './index.less'
import nullord from '../../img/nullord.png'
import use from '../../img/use.png'
import alreadyOverdue from '../../img/alreadyOverdue.png'
import alreadyUse from '../../img/alreadyUse.png'
import background from '../../img/background.png'

@connect(({ coupons }) => ({ coupons }))
export default class coupons extends Component {

  config = {
    navigationBarTitleText: '优惠券',
  }

  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
    }
  }

  handleClick(value){
    console.log('coupons handleClick value', value);
    let status='';
    switch (value) {
      case 0:
        status='useable';
        break;
      case 1:
        status='used';
        break;
      case 2:
        status='expired';
        break;
      default:
    }
    console.log('coupons handleClick status', status);
    const { dispatch } = this.props;
    const {id}=this.$router.params;
    dispatch({
      type: 'coupons/init',
      payload:{status,id}
    });
    this.setState({
      current: value
    })
  }
  componentWillMount () {
    console.log('home componentWillMount');
    const {id}=this.$router.params;
    console.log('coupons componentWillMount id', id);
    const { dispatch } = this.props;
    dispatch({
      type: 'coupons/init',
      payload:{status:'useable',id}
    });
  }

  render () {
    const {reel}=this.props.coupons;
    console.log('coupons render reel',reel);
    const {current} = this.state;
    const tabList = [
      { title: '待使用' },
      { title: '已使用' },
      { title: '已过期' }
    ];
    return (
      <View>
        <AtTabs current={current} className='atb' tabDirection='horizontal' tabList={tabList} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={current} index={0} >
            {true?(
              <View className='main' >
              {reel.map(item=>(
                <View className='box' key={item.id}>
                  <View className='topGreen' />
                  <View className='bottomBox'>
                    <View className='Left'>
                      <View className='leftView'>
                        <Text className='symbol'>￥</Text>
                        <Text className='amount'>{item.amount/100}</Text>
                      </View>
                      <View className='centerView'>
                        <View className='viewBox'>
                          <Image src={background} className='background' />
                          <Text className='fullAmount'>满{item.require/100}元可用</Text>
                        </View>
                        <Text className='time'>{moment(item.expiredDate).format('YYYY-MM-DD')}</Text>
                      </View>
                    </View>
                    <View className='rightView'>
                      <Image src={use} className='rightImg' />
                    </View>
                  </View>
                </View>
              ))}

              </View>
            ):(
              <View className='main' >
                <Image src={nullord} className='empty' />
                <Text className='zanwu'>暂无优惠券</Text>
                <Text className='xiadan'>“快去领取吧”</Text>
              </View>
            )}
          </AtTabsPane>
          <AtTabsPane current={current} index={1} >
            {true?(
              <View className='main' >
              {reel.map(item=>(
                <View className='twoBox' key={item.id}>
                  <View className='topTwoGreen' />
                  <View className='bottomBox'>
                    <View className='Left'>
                      <View className='leftTwoView'>
                        <Text className='symbolTwo'>￥</Text>
                        <Text className='amountTwo'>{item.amount/100}</Text>
                      </View>
                      <View className='centerView'>
                        <View className='viewBox'>
                          <Image src={background} className='background' />
                          <Text className='fullAmount'>满{item.require/100}元可用</Text>
                        </View>
                        <Text className='time'>{moment(item.expiredDate).format('YYYY-MM-DD')}</Text>
                      </View>
                    </View>
                    <View className='rightView'>
                      <Image src={alreadyUse} className='rightImg' />
                    </View>
                  </View>
                </View>
              ))}

              </View>
            ):(
              <View className='main' >
                <Image src={nullord} className='empty' />
                <Text className='zanwu'>暂无优惠券</Text>
                <Text className='xiadan'>“快去领取吧”</Text>
              </View>
            )}
          </AtTabsPane>
          <AtTabsPane current={current} index={2} >
            {true?(
              <View className='main' >
              {reel.map(item=>(
                <View className='twoBox' key={item.id}>
                  <View className='topTwoGreen' />
                  <View className='bottomBox'>
                    <View className='Left'>
                      <View className='leftTwoView'>
                        <Text className='symbolTwo'>￥</Text>
                        <Text className='amountTwo'>{item.amount/100}</Text>
                      </View>
                      <View className='centerView'>
                        <View className='viewBox'>
                          <Image src={background} className='background' />
                          <Text className='fullAmount'>满{item.require/100}元可用</Text>
                        </View>
                        <Text className='time'>{moment(item.expiredDate).format('YYYY-MM-DD')}</Text>
                      </View>
                    </View>
                    <View className='rightView'>
                      <Image src={alreadyOverdue} className='rightImg' />
                    </View>
                  </View>
                </View>
              ))}

              </View>
            ):(
              <View className='main' >
                <Image src={nullord} className='empty' />
                <Text className='zanwu'>暂无优惠券</Text>
                <Text className='xiadan'>“快去领取吧”</Text>
              </View>
            )}
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}
